<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html id = "html" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<title>Gimme Position Tests</title>

		<script type = "text/javascript" src = "../jsunit/app/jsUnitCore.js"></script>
		<script type = "text/javascript" src = "../utils/jsunit/jsUnitHelperFunctions.js"></script>
		<script type = "text/javascript" src = "../build/debug/gimme.js"></script>
		
		<script type = "text/javascript">
			function test_getAbsolutePositionOfElem1()
			{
				var pos = Gimme('#elem1').get_absolute_pos();
				assertEquals('The X position of #elem1 should be 0, but was actually ' + pos.x, 0, pos.x);
				assertEquals('The Y position of #elem1 should be 0, but was actually ' + pos.y, 0, pos.y);
			}
			
			function test_getAbsolutePositionOfElem2()
			{
				var pos = Gimme('#elem2').get_absolute_pos();
				assertEquals('The X position of #elem2 should be 50, but was actually ' + pos.x, 50, pos.x);
				assertEquals('The Y position of #elem2 should be 50, but was actually ' + pos.y, 50, pos.y);
			}
			
			function test_getAbsolutePositionOfElem3()
			{
				var pos = Gimme('#elem3').get_absolute_pos();
				assertEquals('The X position of #elem3 should be 80, but was actually ' + pos.x, 80, pos.x);
				assertEquals('The Y position of #elem3 should be 70, but was actually ' + pos.y, 70, pos.y);
			}			
			
			function test_getAbsolutePositionOfElem4()
			{
				var pos = Gimme('#elem4').get_absolute_pos();
				assertEquals('The X position of #elem4 should be 180, but was actually ' + pos.x, 180, pos.x);
				assertEquals('The Y position of #elem4 should be 180, but was actually ' + pos.y, 190, pos.y);
			}
			
			function test_getAbsolutePositionOfElem7()
			{
				var pos = Gimme('#elem7').get_absolute_pos();
				assertEquals('The X position of #elem4 should be 110, but was actually ' + pos.x, 110, pos.x);
				assertEquals('The Y position of #elem4 should be 110, but was actually ' + pos.y, 110, pos.y);
			}
			
			function test_getAbsolutePositionOfElem1WhenBrowserIsScrolled100x100()
			{
				window.scrollTo(100, 100);
				var pos = Gimme('#elem1').get_absolute_pos();
				assertEquals('The X position of #elem1 should be 0, but was actually ' + pos.x, 0, pos.x);
				assertEquals('The Y position of #elem1 should be 0, but was actually ' + pos.y, 0, pos.y);
			}
			
			function test_getAbsolutePositionOfElem3WhenBrowserIsScrolled400x0()
			{
				window.scrollTo(400, 0);
				var pos = Gimme('#elem3').get_absolute_pos();
				assertEquals('The X position of #elem3 should be 80, but was actually ' + pos.x, 80, pos.x);
				assertEquals('The Y position of #elem3 should be 70, but was actually ' + pos.y, 70, pos.y);
			}
			
			function test_getAbsolutePositionOfElem7WhenBrowserIsScrolled0x350()
			{
				window.scrollTo(0, 350);
				var pos = Gimme('#elem7').get_absolute_pos();				
				assertEquals('The X position of #elem3 should be 110, but was actually ' + pos.x, 110, pos.x);
				assertEquals('The Y position of #elem3 should be 110, but was actually ' + pos.y, 110, pos.y);
			}		
			
			function test_getAbsolutePositionOfScrolledElemWhenScrolledParentIsScrolled0x540()
			{
				document.getElementById('scrolledParent').scrollTop = 540;
				var pos = Gimme('#scrolledElem').get_absolute_pos();
				assertEquals('The X position of #scrolledEleme should be 70, but was actually ' + pos.x, 70, pos.x);
				assertEquals('The Y position of #scrolledEleme should be 770, but was actually ' + pos.y, 770, pos.y);
			}
			
			function test_getRelativePositionOfElem3()
			{
				var pos = Gimme('#elem3').get_relative_pos();
				assertEquals('The X position of #elem 3 should be 30, but was actually ' + pos.x, 30, pos.x);
				assertEquals('The Y position of #elem 3 should be 20, but was actually ' + pos.y, 20, pos.y);
			}
			
			function test_getStylePositionOfElem3()
			{
				var pos = Gimme('#elem3').get_style_pos();
				assertEquals('The X position of #elem 3 should be 30, but was actually ' + pos.x, 30, pos.x);
				assertEquals('The Y position of #elem 3 should be 10, but was actually ' + pos.y, 10, pos.y);
			}			
			
		</script>
		
		<style type = "text/css">
			html,body
			{
				margin: 0;
				padding: 0;
			}
			body
			{
				height: 5000px;
				width: 5000px;
			}
			
			h1
			{
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#elem1,
			#elem2,
			#elem3,
			#elem4
			{
				position: absolute;
			}
			
			/* (0, 0) */
			#elem1
			{
				top: 0;
				left: 0;
				width: 500px;
				height: 400px;
				background: pink;
			}
			/* (50, 50) */
			#elem2
			{
				top: 50px;
				left: 0;
				margin-left: 50px;
				width: 400px;
				height: 300px;
				background: lightgreen;
			}
			/* (80, 70) */
			#elem3
			{
				top: 10px;
				margin-top: 10px;
				border-top: 10px solid black;
				left: 30px;
				padding: 20px 10px 10px 10px;
				width: 300px;
				height: 200px;
				background: lightblue;
			}
			/* (180, 180) */
			#elem4
			{
				right: 10px;
				bottom: 10px;
				width: 200px;
				height: 100px;
				border: 5px solid black;
				background: orange;
			}
			
			#elem5
			{
				top: 0;
				left: 0;
				position: relative;
				border: 10px solid purple;
				background: yellow;
				padding: 100px;
				opacity: 0;
				filter: alpha(opacity=0);
			}
			
			/* (110, 110) */
			#elem7
			{
				position: static;
				height: 50px;
				width: 100px;
				background: orange;
			}
			
			/* (10, 500) */
			#scrolledParent
			{
				position: absolute;
				padding: 10px;
				top: 500px;
				left: 10px;
				height: 300px;
				width: 200px;
				overflow: auto;
				background: lightblue;
			}
			/* (70, 1310) when not scrolled */
			#scrolledElem
			{
				position: relative;
				top: 800px;
				left: 50px;
				height: 50px;
				width: 50px;
				background: pink;
			}
			
			#dot1,
			#dot2,
			#dot3,
			#dot4,
			#dot7
			{
				position: absolute;
				width: 4px;
				height: 4px;
				background: red;
				z-index: 100;
			}
			#dot1 { top: 0; left: 0; }
			#dot2 {	top: 50px; left: 50px; }
			#dot3 { top: 70px; left: 80px; }
			#dot4 { top: 190px; left: 180px; }
			#dot7 { top: 110px; left: 110px; }
		</style>
	</head>

	<body id = "body">
		<h1>Gimme Position Tests</h1>

		<div id = "elem1">
			<div id = "elem2">
				<div id = "elem3">3
					<div id = "elem4"></div>
				</div>
			</div>
		</div>
		
		<div id = "elem5">
			<div id = "elem6">
				<div id = "elem7"></div>
			</div>
		</div>
		
		<div id = "scrolledParent">
			<div id = "scrolledElem">scrolled</div>
		</div>
		
		<div id = "dot1"></div>
		<div id = "dot2"></div>
		<div id = "dot3"></div>
		<div id = "dot4"></div>
		<div id = "dot7"></div>
		
	</body>

</html>